import { defineConfig, presetAttributify, presetUno } from "unocss";
import presetRemToPx from "@unocss/preset-rem-to-px";
import transformerDirectives from "@unocss/transformer-directives";
import type { Theme } from "unocss/preset-uno";
import presetTheme from "unocss-preset-theme";
import { appTheme, safelist } from "./src/theme";
import { designW, divisor } from "./src/config/app";

export default defineConfig({
  // 预设
  presets: [
    presetUno(),
    presetAttributify(),
    presetRemToPx({
      baseFontSize: 4
    }),
    presetTheme<Theme>({
      theme: appTheme
    })
  ],
  // 快捷方式, 将多个规则组合成单个简写
  shortcuts: [
    { center: "flex justify-center items-center" },
    {
      disabled_click: "pointer-events-none  color-#6c757d cursor-not-allowed"
      // "pointer-events-none bg-#e9ecef color-#6c757d cursor-not-allowed"
    },
    {
      btn: "py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer"
    },
    // 动态快捷方式
    [
      /^btn-(.*)$/,
      ([, c]) =>
        `bg-${c} text-#fff hover:bg-${c}/80 py-2 px-4 font-semibold rounded-lg shadow-md cursor-pointer`
    ],
    // 使用主题
    [
      /^appbd-(.*)$/,
      ([, c], { theme }) => {
        return `b-1 b-${c} b-dashed`;
      }
    ]
  ],
  // 自定义规则
  rules: [
    // 注意：属性语法遵循 CSS 属性语法，例如 font-weight 而不是 fontWeight。如果属性名中有连字符 -，应该用引号括起来。
    [/^font-weight-(\d+)$/, ([, d]) => ({ "font-weight": d })],
    [
      "disabled-select-text",
      {
        "user-select": "none",
        "-moz-user-select": "none",
        "-ms-user-select": "none",
        "-khtml-user-select": "none"
      }
    ],
    [/^bd-(\d+)$/, ([, d]) => ({ border: `${d}px solid #ddd` })],
    [/^p-(\d+)$/, match => ({ padding: `${match[1]}px` })],
    [
      /^col-gap-(\d+)$/,
      ([, arg1]) => {
        return { "column-gap": `${parseFloat(arg1)}px` };
      }
    ],
    [
      /^row-gap-(\d+)$/,
      ([, arg1]) => {
        return { "row-gap": `${parseFloat(arg1)}px` };
      }
    ],
    [
      /^f-w-(\d+)$/,
      ([, arg1]) => {
        return { "font-weight": arg1 };
      }
    ],
    [
      /^br-(\d+)$/,
      ([, arg1]) => {
        return { "border-radius": `${parseFloat(arg1)}px` };
      }
    ],
    [
      /^br:(.*):(.*):(.*):(.*)$/,
      match => {
        return {
          "border-radius": `${parseFloat(match[1])}px ${parseFloat(
            match[2]
          )}px ${parseFloat(match[3])}px ${parseFloat(match[4])}px`
        };
      }
    ],
    [
      /^p-tb-(\d+)$/,
      ([, arg1]) => {
        return { padding: `${parseFloat(arg1)}px 0` };
      }
    ],
    [
      /^b-b:(.*):(.*)$/,
      match => {
        return {
          "border-bottom": `${parseFloat(match[1])}px solid ${match[2]}`
        };
      }
    ],
    [
      /^text-ellipsis-(\d+)$/,
      match => {
        return {
          display: "-webkit-box",
          overflow: "hidden",
          "text-overflow": "ellipsis",
          "word-break": "break-all",
          "-webkit-line-clamp": match[1],
          "-webkit-box-orient": "vertical"
        };
      }
    ],

    [
      /^bg-size-\[(.*)_(.*)\]$/,
      ([, width, height]) => ({
        "background-size": `${width} ${height}`
      })
    ],
    [
      /^bg-linear-\[(.*)\]$/,
      ([, params]) => {
        const gradientParams = params.split(",").map(param => param.trim());
        const angle = gradientParams[0];
        const colorStops = gradientParams
          .slice(1)
          .join(", ")
          .replace(/_/g, " ");
        return {
          background: `linear-gradient(${angle}, ${colorStops})`
        };
      }
    ],
    [
      /^max-w$/,
      () => {
        return { "max-width": designW * divisor + "px" };
      }
    ]
  ],
  // 转换器
  transformers: [transformerDirectives()],
  // 白名单safelist
  safelist: safelist() // 可以根据项目需要添加
});
